<template>
  <div>
    <w-button type="primary" @click="handleClick"
      >按钮发生发射点发生发顺丰</w-button
    >
    <br />
    <w-button type="success" icon="yiliao_danao"
      >按钮发生发射点发生发顺丰</w-button
    >
    <br />
    <w-button type="warning" disabled>按钮发生发射点发生发顺丰</w-button>
    <br />
    <w-button type="danger" :round="true">按钮发生发射点发生发顺丰</w-button>
    <br />
    <w-icon name="yiliao_danao"></w-icon>
    <br />
    <div class="input-wrapper">
      <w-input placeholder="请输入" v-model="msg" type="text"></w-input>
      <div>{{ msg }}</div>
      <w-input
        placeholder="请输入"
        v-model="msg"
        type="text"
        size="small"
      ></w-input>
      <w-input
        placeholder="请输入"
        v-model="msg"
        type="text"
        size="small"
        clearable
      ></w-input>
      <w-input
        placeholder="请输入"
        :disabled="true"
        v-model="msg"
        type="text"
        size="small"
        clearable
      ></w-input>
      <w-input
        placeholder="请输入"
        center
        v-model="msg"
        type="text"
        size="small"
        clearable
      ></w-input>
      <w-input
        placeholder="请输入"
        center
        v-model="msg"
        type="text"
        size="small"
        clearable
      >
        <template slot="prepend">https://</template>
        <template slot="append">.com</template>
      </w-input>

      <w-input placeholder="请输入" v-model="msg" type="textarea"></w-input>
    </div>
    <div>
      <w-inputNumber
        v-model="count"
        :max="10"
        :min="1"
        :disabled="true"
      ></w-inputNumber>
      <w-inputNumber v-model="count" :max="10" :min="1"></w-inputNumber>
      <w-inputNumber
        v-model="count"
        :max="10"
        :min="1"
        :precision="2"
      ></w-inputNumber>

      <div>{{ count }}</div>
    </div>
    <div>
      <w-radio label="12" v-model="radioData"></w-radio>
      <w-radio label="123" v-model="radioData"></w-radio>
      <div>{{ radioData }}</div>
    </div>
    <div>
      <w-radioGroup v-model="radioGroupData">
        <w-radio label="12">312</w-radio>
        <w-radio label="123">3123</w-radio>
      </w-radioGroup>
      <div>{{ radioGroupData }}</div>
    </div>
    <div>
      <w-checkbox v-model="checkboxData" label="复选框"></w-checkbox>
      <w-checkbox v-model="checkboxData" label="复选框1"></w-checkbox>
      <w-checkbox v-model="checkboxData" label="复选框2"></w-checkbox>
      <div>{{ checkboxData }}</div>
    </div>
    <div>
      <w-checkboxGroup v-model="checkboxGroupData">
        <w-checkbox label="复选框"></w-checkbox>
        <w-checkbox label="复选框1"></w-checkbox>
        <w-checkbox label="复选框2"></w-checkbox>
      </w-checkboxGroup>
      <div>{{ checkboxGroupData }}</div>
    </div>
    <div>
      <w-button type="primary" @click="showMasage">消息提示</w-button>
      <w-button type="primary" @click="showMasage1">消息提示</w-button>
    </div>
    <div>
      <w-button type="primary" @click="showMasageBox">消息提示</w-button>
      <w-button type="primary" @click="showMasage1">消息提示</w-button>
    </div>
    <div>
      <w-button type="primary" @click="showModal">消息提示</w-button>
      <w-button type="primary" @click="showMasage1">消息提示</w-button>
    </div>
    <div>
      <w-uploader
        accept="images/pang,images/jpeg"
        :size="150 * 1024"
        :on-success="uploadSuccess"
        :on-error="uploadError"
      >
        <div class="uploader-area" slot="uploader-area">
          <w-icon name="yiliao_danao"></w-icon>
          <div class="r-uploader__text">将文件拖到此处<em>点击上传</em></div>
          <div class="r-uploader--tip" slot="tip">只能上传jpj格式</div>
        </div>
      </w-uploader>
    </div>
    <div>
      <Button @click="value1 = true" type="primary">Open</Button>
      <my-drawer
        @on-close="close"
        title="Basic Drawer"
        :closable="false"
        v-model="value1"
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </my-drawer>
    </div>
  </div>
</template>

<script>
import myDrawer from "./myDrawer.vue";
export default {
  name: "HelloWorld",
  components: {
    myDrawer,
  },
  data() {
    return {
      value1: false,
      msg: "",
      count: 1,
      radioData: "123",
      radioGroupData: "",
      checkboxData: [],
      checkboxGroupData: [],
    };
  },
  methods: {
    close() {
      console.log("抽屉关闭");
    },
    uploadError(msg) {
      this.$message({ message: msg });
    },
    uploadSuccess(msg) {
      this.$message({ message: msg });
    },
    showModal() {
      this.$modal({
        template: "<h1>哈喽</h1>",
      });
    },
    handleClick() {
      alert(this.msg);
      alert(12);
    },
    showMasage1() {
      this.$message({
        message: "我是一个message 消息提示",
        duration: 3000,
        position: "left",
        type: "error",
      });
    },
    showMasage() {
      this.$message({
        message: "我是一个message 消息提示",
        duration: 3000,
        position: "center",
        type: "error",
      });
    },
    showMasageBox() {
      this.$confirm({
        title: "我是标题",
        contend: "我是内容",
        onOk: () => {
          this.$message({
            message: "确定",
          });
        },
        onCancel: () => {
          this.$message({
            message: "",
          });
        },
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-wrapper {
  width: 480px;
}
</style>
